<template>
  <view class="topbar-page">
    <view class="topbar-wrap cant flex">
      <view class="logo-wrap" :class="{ mt1: !isIndex }" @click="goBack()">
        <image class="logo" src="/static/img/logo.png"></image>
        <view class="logo-txt" v-if="!isIndex">
          <image class="goback" src="/static/img/goback.png"></image>
          返回首页
        </view>
      </view>
      <view class="ramad" @click="gotoStroeSetting()">桌号：{{ storeConf.table_number }}</view>
      <view class="search flex">
        <input v-model="keywords" maxlength="30" v-if="hType == 'search'" class="uni-input s_input" @confirm="search" confirm-type="search" placeholder="搜索…" placeholder-class="placeholder" />
        <image class="s_icon" src="/static/img/search.png" @click="search"></image>
      </view>
      <view class="cart-box" @click="handleCart">
        <image class="cart-img" src="/static/img/cart.png"></image>
        <view v-if="cartNum || integralCartNum" class="cart-red"></view>
      </view>
    </view>
    <cart :isShow="cartShow" @cartHide="cartHide" @cartToHide="cartToHide"></cart>
    <pay-list v-if="payShow" :payType="payType" @payHide="payHide"></pay-list>
  </view>
</template>

<script>
import cart from '@/components/cart.vue';
import payList from '@/components/payList.vue';
import { mapState } from 'vuex'
export default {
  name: 'topBar',
  components: {
    cart,
    payList
  },
  props: {
    isIndex: {
      type: Boolean,
      default: false
    },
    hType: {
      type: String,
      default: 'search'
    }
  },
  computed: {
    ...mapState(['cartNum', 'integralCartNum', 'storeConf']),
    keywords: {
      get () {
        return this.$store.state.keywords
      },
      set (val) {
        this.$store.state.keywords = val
      }
    }
  },
  data() {
    return {
      cartShow: false,
      payShow: false,
      num: 0, //点击次数
      timer0: '', //第一次点击的时间
      timer5: '', //第四次点击的时间,
      payType: 'general'
    };
  },
  methods: {
    /** 
    * 获取搜索关键词
    */
    // getKeyWords(e) {
    //   let keywords = e.detail.value
    //   this.$store.commit('setkeywords', keywords)
    // },
    // 页面搜索（夸页面搜索）
    search() {
      if (!this.isIndex) {
        this.$emit('searchInGoods')
      } else {
        // let keywords = this.$store.state.keywords
        this.$common.navigateTo('/pages/goods/index?s='+ this.keywords)
      }
    },
    cartHide(data) {
      this.payType = data && data.payType ? data.payType : 'general'
      this.cartShow = data.cart;
      this.payShow = data.pay;
    },
    payHide(data) {
      this.payShow = data;
    },
    handleCart() {
      this.cartShow = !this.cartShow;
    },
    cartToHide(data) {
      this.cartShow = data;
    },
    // 返回首页
    goBack() {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1];
      if (page.route !== 'pages/index/index') {
        this.$common.navigateBack('/pages/index/index');
      }
    },
    // 点击5次进行门店设置页面
    gotoStroeSetting() {
      let that = this;
      that.num++;
      if (that.num == 1) {
        that.timer0 = new Date().getTime() / 1000;
      }
      if (that.num == 5) {
        that.timer5 = new Date().getTime() / 1000;
        if (that.timer5 - that.timer0 <= 5) {
          that.num = 0;
          that.$common.navigateTo('/pages/store/login');
        } else {
          that.num = 0;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.topbar-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 8vw;
}
.topbar-wrap {
  width: 100vw;
  height: 8vw;
  padding: 2.5vw 2vw;
  box-sizing: border-box;
  background: #333333;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  .logo-wrap {
    width: 8vw;
    &.mt1 {
      margin-top: -1vw;
    }
    .logo {
      width: 4vw;
      height: 4vw;
      margin: 0 auto;
      display: block;
    }
    .logo-txt {
      color: #fff;
      font-size: 14px;
      .goback {
        width: 1vw;
        height: 1vw;
        margin-right: 0.5vw;
      }
    }
  }
  .ramad {
    width: 150px;
    font-size: 16px;
    color: #c4c4c4;
    text-align: center;
    line-height: 40px;
  }
  .placeholder{
    color: red;
  }
  .search {
    width: 68vw;
    height: 40px;
    // line-height: 40px;
    align-items: center;
    background: #3f3f3f;
    border-radius: 5px;
    position: relative;
    justify-content: flex-start;
    align-items: center;
  }
  .search input{
    height: 28px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .s_input {
    // position: absolute;
    width: 68vw;
    height: 28px;
    // line-height: 40px;
    left: 0;
    top: 0;
    padding: 0 50px 0 20px;
    box-sizing: border-box;
    color: #ffffff;
  }
  .search .s_icon {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 22px;
    height: 22px;
  }
  .cart-box {
    line-height: 40px;
    position: relative;
    .cart-img {
      width: 37px;
      height: 34px;
      margin-left: 30px;
      margin-right: 10px;
    }
    .cart-red{
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 0;
      right: .5vw;
    }
  }
}
</style>
